import { getFormatList } from '@/services/ant-design-pro/brainSpace';
import { connect } from '@umijs/max';
import { Empty, message, Pagination, Select } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ShortDocItem from '../ShortDocItem';
import './index.less';

const Reference: React.FC<any> = (props: any) => {
  const { title } = props;
  const [totalCount, setTotalCount] = useState<number>(0);
  const [dataList, setDataList] = useState<any[]>([]); // 文档列表
  const tagKey = useRef(''); // tag的key
  const [typeOptions, setTypeOptions] = useState<any[]>([]); // 类型列表
  //分页默认值，
  const [pageOption, setPageOption] = useState({
    page: 1, //当前页为1
    per_page: 15, //一页15行
  });

  const getFormat = async (page: number, per_page: number) => {
    const params: any = { page, per_page };
    if (tagKey.current) {
      params.class = tagKey.current;
    }
    const res = await getFormatList(params);
    if (res.code === 0) {
      const { total_count, articles } = res.data;
      setTotalCount(total_count);
      setDataList(articles);
    } else {
      message.error(res.msg);
    }
  };

  //当翻页时，改变当前为第current页，current和size这两参数是onChange API自带的，会帮你算出来你现在在第几页，这一页有多少行数据。
  const paginationChange = async (current: number, size: number) => {
    //前面用到useState
    setPageOption({
      page: current, //当前所在页面
      per_page: size, //一页有几行
    });

    getFormat(current, size);
  };

  // 加载数据
  const loadCognitionTypes = async () => {
    const data: any = [{ value: '', label: '全部类型' }];
    props.spaceModel.cognitionTypes.forEach((v: any) => {
      if (v.name === 'format' && v.second_class_list && v.second_class_list.length) {
        v.second_class_list.forEach((c_v: any) => {
          const obj: any = {
            value: c_v,
            label: c_v,
          };
          data.push(obj);
        });
      }
    });
    setTypeOptions(data);
  };

  // 类型切换
  const handleTypeChange = (value: string) => {
    tagKey.current = value;
    setPageOption({
      page: 1,
      per_page: 15,
    });
    setTotalCount(0);
    getFormat(1, 15);
  };

  useEffect(() => {
    getFormat(pageOption.page, pageOption.per_page);
    loadCognitionTypes();
  }, []);

  return (
    <div className="format-warp">
      <div className="item-header">
        <div className="title">{title}</div>
        <Select
          defaultValue={tagKey.current}
          style={{ width: 120, marginRight: 20 }}
          onChange={handleTypeChange}
          options={typeOptions}
        />
      </div>
      <div className="item-card-box">
        {dataList.length > 0 &&
          dataList.map((item: any) => {
            return <ShortDocItem key={item.id} item={item}></ShortDocItem>;
          })}
        {!dataList.length && <Empty className="empty" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
      </div>

      {dataList.length > 0 && (
        <div className="pagination flex-jcon-end m-t-10">
          <Pagination
            current={pageOption.page}
            defaultCurrent={1}
            pageSize={pageOption.per_page}
            total={totalCount}
            showSizeChanger={false}
            onChange={paginationChange}
          />
        </div>
      )}
    </div>
  );
};

export default connect(({ spaceModel }) => ({ spaceModel }), null, null)(Reference);
